<template>
    <div>hook的使用</div>
    <div class="hook-container">
        <div>当前剩余蛋糕：{{ cakeRoom.stock }}</div>
        <div class="operation-content">
            <div class="box">
                <div>person1的体重{{ person1.weight }}</div>
                <div class="title">person1的相关动作</div>
                <button @click="eatCake(person1)">吃蛋糕</button>
                <button @click="person1.doMotion()">锻炼</button>

            </div>
            <div class="box">
                <div>person2的体重{{ person2.weight }}</div>
                <div class="title">person2的相关动作</div>
                <button @click="eatCake(person2)">吃蛋糕</button>
                <button @click="person2.doMotion()">锻炼</button>
            </div>
        </div>

        <Child></Child>
    </div>
</template>
<script lang="ts" setup>
import { useCakeWeight } from './hook/cakeWeight'
import { useCakeRoom } from './hook/cakeRoom'
import Child from './components/Child.vue'

let cakeRoom = useCakeRoom()
let person1 = useCakeWeight(cakeRoom);
let person2 = useCakeWeight(cakeRoom);

const eatCake = (person:any) => {
    person.eatFood()
}
</script>
<style scoped>
    .operation-content {
        display: flex;
        justify-content: center;
        margin-top:12px;
    }
    .operation-content .box {
        width: 400px;
        padding:10px;
        margin-right:20px;
        border:1px solid #eee;
    }
    .operation-content .title {
        font-size:12px;
        padding-bottom:10px;
    }
    .operation-content button {
        margin:0 10px;
    }
</style>